<template>
  <!-- 选择所属派出所 -->
  <view class="localPolice">
    <view class="policeTitle">
      <u--input
        v-model="policeAgencyName"
        :maxlength="15"
        placeholder="搜索派出所"
        prefixIcon="search"
        border="surround"
        clearable
        @change="changeHandle"
      ></u--input>
      <!-- <view class="searchView" @click="searchHandle">确定</view> -->
    </view>

    <view
      class="policenameClass"
      v-for="item in policeList"
      :key="item.id"
      @click="rdioHandle(item)"
    >
      <view><u-icon name="search" size="22" color="#BCBCBC"></u-icon></view>
      <view class="nameClass">{{ item.policeAgencyName }}</view>
      <view class="per-radio">
        <image
          :src="
            item.flag
              ? baseImgUrl + 'choseRadio.png'
              : baseImgUrl + 'nochoose.png'
          "
        ></image>
      </view>
    </view>

    <view v-if="!is_search">
      <u-empty
        mode="list"
        text="请搜索派出所"
        :icon="baseImgUrl + 'no-icon7.png'"
      >
      </u-empty>
    </view>

    <view v-if="is_search && !policeList.length">
      <u-empty
        mode="list"
        text="未找到符合的派出所，请重试！"
        :icon="baseImgUrl + 'no-icon7.png'"
      >
      </u-empty>
    </view>
  </view>
</template>

<script>
import { basePolice } from "@/api/myself.js";
import { navBack } from "@/utils/util.js";

export default {
  name: "localPolice",
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      policeAgencyName: "",
      is_search: false,
      policeList: [],
    };
  },
  methods: {
    changeHandle(e) {
      if (e) {
        basePolice({ policeAgencyName: e }).then((res) => {
          this.is_search = true;
          this.policeList = res.result.map((v) => ({
            id: v.id,
            policeAgencyName: v.policeAgencyName,
            flag: false,
          }));
        });
      }
    },
    rdioHandle(item) {
      for (var v of this.policeList) {
        v.id == item.id ? (v.flag = true) : (v.flag = false);
      }

      let office = this.policeList.filter((v) => {
        if (v.flag) return v;
      });
      uni.$emit("policeOffice", office);
      navBack();
    },
    searchHandle() {
      if (!this.policeAgencyName) return;

      let office = this.policeList.filter((v) => {
        if (v.flag) return v;
      });
      uni.$emit("policeOffice", office);
      navBack();
    },
  },
};
</script>

<style lang="scss">
.localPolice {
  flex: 1;
  padding: 0 15rpx;

  .policeTitle {
    display: flex;
  }

  .searchView {
    margin-left: 10rpx;
    padding-top: 15rpx;
    width: 100rpx;
    text-align: center;
    font-size: 34rpx;
    color: #0081ff;
  }

  .code-btn {
    color: #2488f5;
    font-size: 28rpx;
  }

  .policenameClass {
    display: flex;
    margin-top: 10rpx;
    padding: 10rpx 15rpx;
    border-bottom: 1px solid #e0e0e0;
    font-size: 33rpx;
    color: #3f3f3f;

    .nameClass {
      flex: 1;
      margin-left: 8rpx;
    }

    .per-radio {
      margin-left: 10rpx;
      padding-top: 5rpx;

      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}
</style>
